<template>
  <div class="mainPage">
    <div class="mainTopBox">      
    <swiper :options="swiperOption">
      <swiper-slide v-for="(banner,index) in banners" :key="index">
        <img class="topImg" :src="banner" />
      </swiper-slide>
      <div class="swiper-pagination dotBox" slot="pagination"></div>
    </swiper>
    <div class="mainTitBox mainItem">
      <router-link v-for="(item,index) in titData" 
        :key="index" tag="div" class="item"
        :to="item.url" @click.native="clickTit(index)"
      >
        {{item.title}}
      </router-link>
    </div>
    <div class="progressbarBox">
      <div class="progressbar" :style="{left:left*33.33+'%'}"></div>
    </div>
    </div>
    <router-view class="view"/>
    <a class="buttonBox" :href="buttonData.path">{{buttonData.title}}</a>
  </div>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        buttonData:{
          title:'我要报名',
          path:'https://www.hdb.com/party/ree8n.html?from=groupmessage'
        },
        left:0,
        titData:[
          {
            title:'活动介绍',
            url:'/home'
          },
          {
            title:'资讯报道',
            url:'/news'
          },
          {
            title:'钢琴使者招募',
            url:'/recruit'
          }
        ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            bulletClass : 'my-bullet',
            bulletActiveClass: 'my-bullet-active',
          }
        },
        banners:['/static/banner2.png', '/static/banner1.png']
      }
    },
    methods: {
      clickTit(inde) {
        this.left = 0;
        this.left = inde;
        if(inde==0 || inde==1){          
          this.buttonData.title="我要报名";
          this.buttonData.path = "https://www.hdb.com/party/ree8n.html?from=groupmessage";
        }
        if(inde==2){          
          this.buttonData.title="成为钢琴使者";
          this.buttonData.path = "https://mp.weixin.qq.com/s/V2B4ognPPaPMxfKWTgQQXQ";
        }
      }      
    },
    created() {
      let path = this.$route.path;
      switch(path){
        case '/home':
          this.left = 0;
          this.buttonData.title="我要报名";
          this.buttonData.path = "https://www.hdb.com/party/ree8n.html?from=groupmessage";
          break;
        case '/news':
          this.left = 1;
          this.buttonData.title="我要报名";
          this.buttonData.path = "https://www.hdb.com/party/ree8n.html?from=groupmessage";
          break;
        case '/recruit':
          this.left = 2;
          this.buttonData.title="成为钢琴使者";
          this.buttonData.path = "https://mp.weixin.qq.com/s/V2B4ognPPaPMxfKWTgQQXQ";
          break;
      }
    }
  }
</script>

<style>
.buttonBox{
  height: 90px;
  line-height: 90px;
  background: #086acc;
  color:#fff;
  font-size: 28px;
  text-decoration: none;
}
.mainPage{
  display: flex;
  height: 100%;
  flex-direction: column;
  background: #f5f5f5;
}
.mainTopBox{
  
}
.view{
  flex:1;
  font-size: 24px;  
  overflow-y: auto;
}
.progressbarBox{
  width: 100%;
  height: 6px;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #ddd; /*no*/
}
.progressbarBox .progressbar{
  position: absolute;
  width: 33.33%;height: 100%;
  left:0;
  bottom:-1px; /*no*/
  background: #238cf5;
  transition: left 0.3s ease-out;
}
.mainTitBox{
  display: flex;
  width: 100%;
  height: 85px;
  background: #fff;
  font-size: 28px;
  color: #333333;
  justify-content: center;
  align-items: center;
}
.mainTitBox .item{
  flex:1;
}
.mainTitBox .item.router-link-active{
  color:#0f6ece;
}
.topImg{
  display: block;
  width: 100%;
}
.my-bullet{
  display: inline-block;
  width: 16px;height: 16px;
  border-radius: 50%;
  background: #725000;
  margin:0 10px;
}
.my-bullet-active{
  background: #ecaa11;
}
</style>
